<template>
    <div class="common-layout container">
        <el-container class="container">
            <el-header class="head">
                <div class="logo">
                    <img src="../assets/logo.png" alt="">
                    <span>后台管理系统</span>
                </div>
                <div class="user">
                    <el-button @click="logout" type="success" plain>退出</el-button>
                    <!-- <el-button @click="test">测试</el-button> -->
                </div>
            </el-header>
            <el-container>
                <el-aside class="aside">
                    <el-menu 
                    active-text-color="#ffd04b"
                    background-color="#304156"
                    class="el-menu-vertical-demo"
                    default-active="2"
                    text-color="#fff"
                    unique-opened="True"
                    router
                    >
        <el-sub-menu :index="index+' '" v-for="(item,index) in menuList.menus">                            <template #title>
                                <el-icon>
                                    <!-- <User /> -->
                                    <component :is="menuList.icons[item.id]"></component>
                                </el-icon>
                                <span>{{ item.name }}</span>
                            </template>
                            <el-menu-item :index="childItem.path" v-for="childItem in item.children">
                                {{ childItem.name }}
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted, reactive } from 'vue';
import api from '@/api/index.js'

const menuList = reactive({
    menus: [],
    icons:{
        '1':'User',
        '2':'Lock',
        '3':'Goods',
        '4':'ShoppingBag',
        '5':'Tickets'
    }
})
onMounted(() => {
    get_menu()
})
const router = useRouter()
const logout = () => {
    sessionStorage.removeItem('token')
    router.push('/login')
}
// const test=()=>{
//     api.test_response().then(res=>{
//         console.log(res)
//     })
// }
const get_menu = () => {
    api.get_menu().then(res => {
        menuList.menus = res.data.data
        // console.log(res)
    })
}
</script>

<style scoped>
.head {
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    color: #999;
    height: 50px;
    width: 100%;
}

.logo {
    float: left;
    height: 50px;
    align-items: center;
    display: flex;
    justify-self: center;
}

.logo img {
    width: 50px;
    height: 30px;
    margin-right: 10px;
}

.user {
    float: right;
    height: 50px;
    align-items: center;
    display: flex;
    justify-self: center;
}

.aside {
    width: "200px";
    background-color: #304156;
}

.container {
    height: 100%;
}
</style>